import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { FormattedMessage, injectIntl } from 'react-intl';
import { TextField, Row, Col, Button,ButtonGroup } from '@folio/stripes/components';

class SearchFrom extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    initialValues: PropTypes.object,
    dictionary: PropTypes.object,
    cleanSearch: PropTypes.func,
    intl: PropTypes.func
  };

  fieldChange = () => {
    const { handleSubmit } = this.props;
    this.setState(() => {
      handleSubmit();
    });
  };

  render() {
    const {
      handleSubmit,
      intl
    } = this.props;
    return (
      <React.Fragment>
        <form data-test-form-page id="form-search" onSubmit={handleSubmit}>
          <Row>
            <Col xs={4}>
              <Field
                component={TextField}
                name="name"
                placeholder={intl.formatMessage({
                  id: 'ui-party.loans.columns.party.sys.settingName'
                })}
                onBlur={this.fieldChange}
                onClearField={this.fieldChange}
              />
            </Col>
            <Col  xs={4}>
                <ButtonGroup>
              <Button type="submit">
                <FormattedMessage id="ui-party.search" />
              </Button>
              <Button onClick={this.props.openEdit}>
                <FormattedMessage id="ui-party.add" />
              </Button>
                </ButtonGroup>
            </Col>
          </Row>
        </form>
      </React.Fragment>
    );
  }
}

export default injectIntl(
  reduxForm({
    form: 'SystemSettingSearchForm',
    navigationCheck: true,
    enableReinitialize: true
  })(SearchFrom)
);
